<template>
  <div class="container">
    <el-table :data="studentdat" style="width: 65%; margin: auto">
      <el-table-column label="学号" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.id }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="班级" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.class }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="专业" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.major }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="成绩" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.achievement }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="success"
            @click="studa(scope.$index, scope.row)"
            >删除</el-button
          ><el-button
            size="small"
            type="primary"
            @click="xiugai(scope.$index, scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>
    <el-form :inline="false" :model="studentform" class="demo-form-inline">
      <el-form-item label="学号">
        <el-input v-model="studentform.id"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="studentform.name"></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="studentform.class"></el-input>
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="studentform.major"></el-input>
      </el-form-item>
      <el-form-item label="成绩">
        <el-input v-model="studentform.achievement"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSubmit()" class="btn"
          >添加</el-button
        >
        
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div style="width:20%;margin:auto">
       <el-form-item label="学号" style="width:50%;float:left;margin-right:10px">
        <el-input v-model="achievement"></el-input>
      </el-form-item >
      <el-button type="success" style="float:left" @click='search()'>查询</el-button> <br>  
    </div>
    <div class='clear'></div>
      <p style='margin-left:-200px'> 
     当前学生姓名为： {{searchdata}}   
    </p> 
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentdat: [
      ],
      searchdata:"",
      achievement:0,
      studentform: [
        {
          id: 0,
          name: "",
          class: "",
          major: "",
          achievement: 0,
        },
      ],
    };
  },
  methods: {
    onSubmit( ) {
        var thisIndex = this.studentdat.findIndex((obj) => {
          return this.studentform.id == obj.id;
        });
        if (thisIndex > -1) {
          alert("学号已经输入过");
        } else {
            var tmp={
               id: this.studentform.id,
               name: this.studentform.name,
               class: this.studentform.class,
               major: this.studentform.major,
               achievement: this.studentform.achievement, 
            }
          this.studentdat.push(tmp);
        }
      }  ,
    xiugai(index, row) {
      this.studentform=row
      console.log(index, row);
    },
    studa(index) {
      this.studentdat.splice(index, 1)
    },
    search(){
      var thisIndex = this.studentdat.findIndex((obj) => {
          return this.studentform.id == obj.id;
        });
      if(this.achievement==this.studentdat[thisIndex].id){
         this.searchdata=this.studentdat[thisIndex].name
        }
    }
    
  },
  components: {},
};
</script>

<style scoped>
.demo-form-inline {
  width: 15%;
  margin: auto;
}
.btn {
  width: 80%;
  margin: auto;
  margin-top: 10px;
}
.clear{
  clear: both;
}
</style>